<html>
    <head>
        <meta charset="utf-8">
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }
            .moveDiv{
                background-color: red;
                height: 100px;
                width: 100px;
                position: relative;
                left: 0px;
                top: 0px;
            }
        </style>
    </head>
    <body>
        <div class="moveDiv">

        </div>
        <script>
            var mouseStartX;
            var mouseStartY;
            
            var divStartX;
            var divStartY;

            var t;
            function down(e){
                if(e.target.className=="moveDiv"){
                    t=e.target;
                    console.log("你点击了红色块")

                    mouseStartX=e.clientX;
                    mouseStartY=e.clientY;

                    divStartX=e.target.offsetLeft;
                    divStartY=e.target.offsetTop;

                    document.onmousemove=move;

                    document.onmouseup=function(){
                        document.onmousemove=null;
                    }
                }
            }

            function move(e){

                t.style.left=divStartX+(e.clientX-mouseStartX)+"px";
                t.style.top=divStartY+(e.clientY-mouseStartY)+"px";
                return false;
            }
            document.onmousedown=down;
        </script>
    </body>
</html>